<!--
 * @Author: your name
 * @Date: 2021-12-01 11:53:10
 * @LastEditTime: 2021-12-01 16:27:49
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \gantt-demo\src\components\gantt.vue
-->
<template>
    <div
        id="gantt_here"
        style='width:1000px; height:400px;'
    ></div>
    <button @click="handleExport">export</button>
</template>
<script lang="ts">
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { gantt, Gantt } from "dhtmlx-gantt";
import { nextTick, onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      gantt.plugins({
        overlay: true,
        quick_info: true,
        tooltip: true,
      });
      gantt.config.drag_move = true;
      gantt.config.types.meeting = "meeting";
      gantt.locale.labels.type_meeting = "Meeting";
      gantt.config.lightbox.meeting_sections = [
        {
          name: "title",
          height: 20,
          map_to: "text",
          type: "textarea",
          focus: true,
        },
        { name: "details", height: 70, map_to: "details", type: "textarea" },
        { name: "type", type: "typeselect", map_to: "type" },
        {
          name: "time",
          height: 72,
          type: "duration",
          single_date: true,
          map_to: "auto",
        },
      ];
      console.log(gantt.config.lightbox);
      gantt.locale.labels.section_title = "Subject";
      gantt.locale.labels.section_details = "Details";
      gantt.templates.task_class = function (start, end, task) {
        if (task.type == gantt.config.types.meeting) {
          return "meeting_task";
        }
        return "";
      };
      gantt.templates.task_row_class = function (start, end, task) {
        if (task.type == gantt.config.types.meeting) {
          return "meeting_task_row";
        }
        return "";
      };

      nextTick(() => {
        gantt.init("gantt_here");
        gantt.parse({
          tasks: [
            {
              id: 11,
              text: "custom",
              type: gantt.config.types.meeting,
              parent: 1,
              start_date: "14-04-2020",
            },
            {
              id: 1,
              text: "Project #1",
              type: gantt.config.types.project,
              open: true,
            },
            {
              id: 2,
              text: "Task #1",
              start_date: "12-04-2020",
              duration: 3,
              parent: 1,
            },
            {
              id: 3,
              text: "Alpha release",
              type: gantt.config.types.milestone,
              parent: 1,
              start_date: "14-04-2020",
            },
            {
              id: 4,
              text: "Task #2",
              start_date: "17-04-2020",
              duration: 3,
              parent: 1,
            },
          ],
          links: [
            { id: 1, source: 1, target: 2, type: "1" },
            { id: 2, source: 2, target: 3, type: "0" },
          ],
        });
      });

      const handleExport = () => {
        gantt.exportToPDF({
          name: "mygantt.pdf",
          header: "<h1>My company</h1>",
          footer: "<h4>Bottom line</h4>",
          locale: "en",
          start: "01-04-2013",
          end: "11-04-2013",
          skin: "terrace",
          data: {},
          server: "https://myapp.com/myexport/gantt",
          raw: true,
        });
      };
      return {
        handleExport,
      };
    });
  },
};
</script>
<style>
.meeting_task {
    height: 24px !important;
    width: 24px !important;
    border: 2px solid #bfc518;
    color: #6ba8e3;
    background: #f2f67e;
    border-radius: 50%;
    transform: translateX(-12px);
}
.meeting_task .gantt_task_progress {
    background: #d9df29;
}
.custom-project {
    border: 2px solid #bfc518;
    color: #001427;
    background: #f2f67e;
    height: 27px;
    width: 27px;
    transform: rotate(45deg);
    border-radius: 50%;
}
.meeting_task_row {
    background-color: red;
}
</style>